<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue 组件高级应用：slot-具名插槽</title>
    <link rel="stylesheet" href="./css/global.css">
</head>

<body>
    <div id="app">
        <!-- 调用组件 -->
        <v-note :title='title' :messages='messages'></v-note>

        <v-comp></v-comp>

        <v-comp><span>父组件模板： 替换掉不具名 slot 模板</span></v-comp>

        <v-comp>
            <span slot='left'>替换掉指定 name slot 模板：返回</span>
            <span slot='center'>替换掉指定 name slot 模板：搜索框</span>
            <span slot='right'>替换掉指定 name slot 模板：下拉菜单</span>
            <span>父组件模板： 替换掉不具名 slot 模板</span>
        </v-comp>

    </div>

    <!-- 自定义组件模板 -->
    <template id='comp'>
        <div>
            <h2>{{msg}}</h2>
            <slot name='left'><span>具名插槽 默认模板：左</span></slot><br>
            <slot name='center'><span>具名插槽  默认模板：中</span></slot><br>
            <slot name='right'><span>具名插槽  默认模板：右</span></slot><br>
            <slot><span>不具名插槽  默认模板: xxx</span></slot>
        </div>
    </template>

    <!-- 组件模板 -->
    <template id='note'>
        <div>
            <h2>{{title}}</h2>
            <ul>
                <li v-html="msg" v-for='msg in messages'></li>
            </ul>
        </div>
    </template>

    <script src="js/vue.js"></script>
    <script>
        // 自定义组件
        const vComp = {
            template: '#comp',
            data() {
                return {
                    msg: '具名插槽的使用',
                }
            }
        }

        // 笔记列表组件
        const vNote = {
            template: '#note',
            props: {
                title: String,
                messages: {
                    type: Array,
                    default () {
                        return [];
                    }
                }
            },
        }

        const app = new Vue({
            el: '#app',
            data: {
                title: '组件高级应用：slot-具名插槽',
                messages: [
                    `插槽模板上添加 name 属性，使用时在替换标签上设置指定的 slot，来指定所要替换的插槽`,
                ]
            },
            components: {
                vNote,
                vComp,
            },
            computed: {},
            methods: {},
        });
    </script>
</body>

</html>
